<template>
  <van-space style="margin: 15px 20px">
    <div class="image" style="height: 115px">
      <van-image v-if="isEditAvatar"
                 round
                 width="7rem"
                 height="7rem"
                 :src="user.avatarUrl"
                 @click="toEditAvatar"
      />
      <van-uploader v-if="!isEditAvatar" multiple :max-size="5000 * 1024"
                    @oversize="onOversize" max-count="1" v-model="avatar"
                    style="width: 7rem; height: 7em" :after-read="afterRead"/>
      <!--      <van-uploader v-model="fileList" multiple max-count="1"/>-->
    </div>
    <van-cell :title="user.username" style="width: 100%;font-size: 0.99rem;">
      <template #label>
        <van-text-ellipsis :content="user.profile ?? '点此编辑个性签名'"
                           @click="toEditProfile" style="margin-top: 20px"/>
      </template>
    </van-cell>
  </van-space>
  <van-cell center>
    <template #title>
      <span style="margin-left: 10px">我的标签</span>
    </template>
    <template #value>
      <van-tag v-for="tag in user.tags" plain type="danger"
               style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
  </van-cell>
  <div style="margin-left: 10px; margin-right: 10px">
    <van-cell title="昵称" is-link to="user/edit" :value="user.username" icon="manager-o"
              @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账户" :value="user.userAccount" icon="user-circle-o"/>
    <van-cell title="性别">
      <template #title>
        <van-icon class="iconfont" class-prefix="icon" name="xingbie"/>
        <span>性别</span>
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon class="iconfont" class-prefix="icon" v-if="user.gender"
                  :name="userGender[user.gender]" size="20px"/>
        <span v-else>未设置</span>
      </template>
    </van-cell>
    <van-cell title="修改信息" is-link to="/user/update"/>
    <van-cell title="我创建的队伍" is-link to="/team/create"/>
    <van-cell title="我加入的队伍" is-link to="/team/join"/>
  </div>
  <div style="margin: 30px 16px;">
    <van-button style="margin-top: 10px" round block type="primary"
                native-type="submit" color="red"
                @click="doLogout">退出
    </van-button>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {userType} from "../models/user";
import {showFailToast, showSuccessToast, showToast} from "vant";
import {getCurrentUser} from "../services/user.ts";
import {ResponseResult} from "../models/resopnse";
import myAxios from "../plugins/myAxios.ts";

const userGender: { [status: number]: string } = {
  0: 'nansheng',
  1: 'nvsheng',
}

const avatar = ref()
const onOversize = () => {
  showToast('文件大小不能超过 500kb');
};
const isEditAvatar = ref<boolean>(false)
const afterRead = async (file: any) => {
  console.log(file)
  const fileFile = file.file
  const res = await myAxios.post("/file/upload", {
    'file': fileFile,
    'biz': "user_avatar"
  }, {
    headers: {'Content-Type': 'multipart/form-data'},
  })
  const updateUserAvatarUrl = await myAxios.post("/user/update", {
    id: user.value.id,
    userAvatarUrl: res
  })
  if (updateUserAvatarUrl) {
    const res: ResponseResult<userType> = await getCurrentUser()
    user.value = res.data
    showSuccessToast("更新成功")
    setTimeout(() => {
      updateAvatarUrl.value = false
    }, 1000);
  }
}

const router = useRouter()
const user = ref<userType>({
  avatarUrl: "",
  createTime: new Date(),
  email: "",
  gender: 0,
  id: 0,
  phone: "",
  profile: "",
  tags: [],
  userAccount: "",
  userPassword: "",
  userRole: 0,
  username: ""
})

onMounted(async () => {
  const res: userType | null = await getCurrentUser()
  if (res) {
    user.value = res
    isEditAvatar.value = !!user.value.avatarUrl
    user.value.tags = JSON.parse(user.value.tags as any)
    showSuccessToast('获取用户信息成功')
  } else {
    showFailToast('获取用户信息失败')
  }

})

const doLogout = async () => {
  const res: ResponseResult<number> = await myAxios.post('/user/logout')
  if (res.code === 0) {
    showSuccessToast('退出成功')
    await router.push({
      path: '/user/login'
    })
  } else {
    showFailToast('退出失败')
  }
}

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: 'user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    },
  })
}

const toEditAvatar = () => {
  isEditAvatar.value = false;
}

const toEditProfile = () => {
  router.push({
    path: "user/edit",
    query: {
      editKey: "profile",
      editName: "个人简介",
      currentValue: user.value?.profile
    }
  })
}

</script>

<style scoped>

</style>
